<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：语法：选择器：hover 悬停功能改变效果【所有元素都可以用】*/
		h1:hover{
			color: #e4393c;
		}
		/* 练习：页面生成200px*200px四方块，默认红色，鼠标悬停后，调整黄色 */
		div{
			width: 200px;
			height: 200px;
			background: #e4393c;
		}
		div:hover{
			background: #ffff7f ;
		}
		/* 超链接4种状态 */
		/* 1.超链接未点击时  伪类选择器：link*/
		a:link{
			color: #e4393c;
			/* 下划线 */
			text-decoration: none;
		}
		/* 2.点击后的超链接  伪类选择器：visited*/
		 a:visited{
			color: skyblue;
		} 
		/* 3.悬停超链接状态 伪类选择器:hover */
		a:hover{
			color: #ffaa7f;
		}
		/* 4.点击跳转时状态 伪类选择器：active */
		a:active{
			font-size: 20px;
		}
		/* :focus 伪类选择器针对input元素 ，鼠标点击输入框时候状态*/
		input:focus{
			background: #b8e4d0;
		}
		li:first-child{
			color: brown;
		}
		li:last-child{
			color: chocolate;
		}
		li:nth-child(3){
			color: aquamarine;
			font-size: 30px;
		}
		</style>
	</head>
	<body>
		<!-- 列表，表格：伪类选择器：first-child，last-child  nth-child(n)-->
		<ul>
			<li>还珠格格</li>
			<li>情深深雨蒙蒙</li>
			<li>一帘幽梦</li>
			<li>庭院深深</li>
			<li>在水一方</li>
		</ul>
		
		<!--表单：伪类选择器     :focus-->
		<input type="text" />
		
		<hr />
		<h1>悬停效果</h1>
		<div ></div>
		<h1>针对超链接了解4种状态</h1>
		<a href="#">超链接1</a>
		<a href="#">超链接2</a>
	</body>
</html>